<template>
  <div ref="main" style="height: 100%">
    <el-input
      v-model="name"
      @input="getAuthList"
      size="medium"
      style="width: 240px; margin-bottom: 20px"
      :placeholder="$t('placeholder.key')"
      clearable
    ></el-input>
    <CommonTable :options="tableConfig.options" :columns="tableConfig.columns" :data="tableData"></CommonTable>
    <CommonPagination :options="tablePagination.options" :dataSource="getAuthList" class="keepdown"></CommonPagination>
  </div>
</template>

<script>
import { getAuthList } from '../../api/api';
import CommonTable from '../../components/componentCommon/CommonTable.vue';
import CommonPagination from '../../components/componentCommon/CommonPagination.vue';

export default {
  name: 'authList',
  props: {
    formdata: {
      type: Object,
      default: () => {}
    },
    updateTime: {
      type: Number,
      default: 0
    }
  },
  components: {
    CommonTable,
    CommonPagination
  },
  data() {
    return {
      tableMaxHeight: null,
      name: '',
      showChName: false,
      showEnName: false,
      tableData: [],
      tablePagination: {
        // tablePagination - options
        options: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [10, 20, 50, 100],
          pagerCount: 5,
          isDisabled: false
        }
      }
    };
  },
  computed: {
    tableConfig() {
      return {
        // table - options
        options: {
          height: this.tableMaxHeight,
          hasSelection: false,
          hasIndex: false,
          isStripe: false,
          isBorder: false,
          isHighlightCurrentRow: false,
          isInit: false,
          isLoading: false,
          sortable: true,
          headerRowStyle: ({ row, rowIndex }) => {
            return {};
          },
          headerCellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          },
          rowStyle: ({ row, rowIndex }) => {
            return {};
          },
          cellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          }
        },
        // table - columns
        columns: [
          {
            prop: 'chName',
            label: this.$t('table.columns_auth.customerName'),
            width: '',
            hasSort: false,
            isShow: this.showChName,
            columnFormatter: (row, column, value) => {
              let result = value === '0' ? this.$t('publishType[1]') : value;
              return result;
            }
          },
          {
            prop: 'enName',
            label: this.$t('table.columns_auth.customerName'),
            width: '',
            hasSort: false,
            isShow: this.showEnName,
            columnFormatter: (row, column, value) => {
              let result = value === '0' ? this.$t('publishType[1]') : value;
              return result;
            }
          },
          {
            prop: 'indate',
            label: this.$t('table.columns_auth.indate'),
            width: '',
            hasSort: false,
            isShow: true,
            columnFormatter: (row, column, value) => {
              let result = value === '' ? this.$t('placeholder.indate') : value;
              return result;
            }
          },
          {
            prop: 'authorisationType',
            label: this.$t('table.columns_auth.authorisationType'),
            width: '',
            hasSort: false,
            isShow: true,
            columnFormatter: (row, column, value) => {
              return this.$t('authorisationType[' + value + ']');
            }
          },
          {
            prop: 'createdBy',
            label: this.$t('table.columns_auth.createdBy'),
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'createdAt',
            label: this.$t('table.columns_auth.createdAt'),
            width: 180,
            hasSort: false,
            isShow: true
          }
        ]
      };
    }
  },
  watch: {
    updateTime(val) {
      this.getAuthList();
    },
    '$store.getters.language'(val) {
      if (val === 'zh') {
        this.showChName = true;
        this.showEnName = false;
      } else if (val === 'en') {
        this.showChName = false;
        this.showEnName = true;
      }
    }
  },
  methods: {
    tableHeightResize() {
      if (this.$refs?.main?.clientHeight) {
        this.tableMaxHeight = this.$refs.main.clientHeight + 20 - 59 - 56;

        // 主内容区宽度
        let winInnerWidth = window.innerWidth;

        // 菜单栏宽度
        let sidebarWidth = document.querySelector('.sidebar-container').getBoundingClientRect().width;

        // 主内容区宽度
        let mainContentWidth = winInnerWidth - sidebarWidth - 30;
        mainContentWidth = mainContentWidth < 1030 ? 1030 : mainContentWidth;

        // 表格宽度
        let tableEl = document.querySelector('.el-table');
        tableEl.style.width = mainContentWidth - 40 + 'px';
      }
    },
    getAuthList() {
      this.tableHeightResize();
      let params = {
        id: this.formdata.id,
        page: this.tablePagination.options.currentPage,
        page_size: this.tablePagination.options.pageSize,
        language: this.$store.getters.language,
        name: this.name
      };
      getAuthList(params).then(res => {
        console.info('授权清单', res.data);
        this.tableData = res.data.list || [];
        this.tablePagination.options.total = res.data.total;
      });
    }
  },
  mounted() {
    window.onresize = () => {
      // 定义窗口大小变更通知事件
      this.tableHeightResize();
    };
    // 监听菜单栏的展开收起
    let sidebarEl = document.querySelector('.fold-icon');
    if (sidebarEl) {
      sidebarEl.addEventListener('click', () => {
        let myEvent = new Event('resize');
        window.dispatchEvent(myEvent);
      });
    }
    if (this.$store.getters.language === 'zh') {
      this.showChName = true;
      this.showEnName = false;
    } else if (this.$store.getters.language === 'en') {
      this.showChName = false;
      this.showEnName = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.keepdown {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  width: auto !important;
}
</style>
